<template>
    <div class="privacy-policy-page">
        <van-nav-bar title="Privacy Policy" left-text="Back" left-arrow @click-left="$router.back()" />

        <div class="policy-content">
            <div class="policy-section">
                <p class="last-updated">Last updated: {{ lastUpdated }}</p>

                <h2>Introduction</h2>
                <p>
                    Social Dojo ("we," "our," or "us") is committed to protecting your privacy.
                    This Privacy Policy explains how we collect, use, disclose, and safeguard
                    your information when you use our mobile application.
                </p>

                <h2>Information We Collect</h2>
                <h3>Personal Information</h3>
                <ul>
                    <li>Name and email address</li>
                    <li>Profile information you provide</li>
                    <li>Training session data and progress</li>
                    <li>Community posts and interactions</li>
                </ul>

                <h3>Usage Information</h3>
                <ul>
                    <li>App usage patterns and preferences</li>
                    <li>Device information and identifiers</li>
                    <li>Performance and analytics data</li>
                </ul>

                <h2>How We Use Your Information</h2>
                <p>We use your information to:</p>
                <ul>
                    <li>Provide and improve our services</li>
                    <li>Personalize your training experience</li>
                    <li>Track your progress and achievements</li>
                    <li>Enable community features</li>
                    <li>Send important updates and notifications</li>
                </ul>

                <h2>Information Sharing</h2>
                <p>
                    We do not sell, trade, or rent your personal information to third parties.
                    We may share information in the following circumstances:
                </p>
                <ul>
                    <li>With your consent</li>
                    <li>To comply with legal obligations</li>
                    <li>To protect our rights and safety</li>
                    <li>With service providers who assist our operations</li>
                </ul>

                <h2>Data Security</h2>
                <p>
                    We implement appropriate security measures to protect your information
                    against unauthorized access, alteration, disclosure, or destruction.
                </p>

                <h2>Your Rights</h2>
                <p>You have the right to:</p>
                <ul>
                    <li>Access your personal information</li>
                    <li>Correct inaccurate information</li>
                    <li>Delete your account and data</li>
                    <li>Opt out of certain communications</li>
                </ul>

                <h2>Contact Us</h2>
                <p>
                    If you have questions about this Privacy Policy, please contact us at:
                    <a href="mailto:privacy@socialdojo.com">privacy@socialdojo.com</a>
                </p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const lastUpdated = computed(() => {
    return new Date().toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    })
})
</script>

<style lang="scss" scoped>
.privacy-policy-page {
    min-height: 100vh;
    background: #f8f9fa;
}

.policy-content {
    padding: 16px;
}

.policy-section {
    background: white;
    border-radius: 16px;
    padding: 24px;

    .last-updated {
        font-size: 14px;
        color: #969799;
        margin-bottom: 24px;
        font-style: italic;
    }

    h2 {
        font-size: 20px;
        font-weight: 600;
        color: #323233;
        margin: 24px 0 16px 0;

        &:first-of-type {
            margin-top: 0;
        }
    }

    h3 {
        font-size: 16px;
        font-weight: 500;
        color: #323233;
        margin: 16px 0 12px 0;
    }

    p {
        font-size: 16px;
        color: #646566;
        line-height: 1.6;
        margin: 0 0 16px 0;

        a {
            color: #1989fa;
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    ul {
        margin: 0 0 16px 0;
        padding-left: 20px;

        li {
            font-size: 16px;
            color: #646566;
            line-height: 1.6;
            margin-bottom: 8px;
        }
    }
}
</style>